<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>会员信息列表</title>

    <link rel="stylesheet" href="/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="/dist/css/laypage.css">

    <script type="text/javascript" src="/dist/js/vue/vue.min.js"></script>
    <script type="text/javascript" src="/dist/js/jquery/jquery.min.js"></script>
    <script type="text/javascript" src="/dist/js/laypage/laypage.js" charset="utf-8"></script>
    <script type="text/javascript" src="/dist/js/layer/layer.js" charset="utf-8"></script>
</head>
<body>

<hr>
<div id="app" class="container">
    <form class="form-inline bg-danger" role="form">
        查询条件：
        <div class="form-group">
            <label class="sr-only" for="mname">用户名称</label>
            <input type="text" class="form-control" id="mname" placeholder="用户名称">
        </div>
        <div class="form-group">
            <label class="sr-only" for="maccout">用户账号</label>
            <input type="text" class="form-control" id="maccout" placeholder="用户账号">
        </div>
        <button type="button" id="findUser" class="btn btn-success">查询用户</button>
        <button type="button" id="addUserBtn" class="btn btn-danger">增加用户</button>
    </form>

    <div class="table-responsive">
        <table class="table">
            <thead>
            <tr class="success">
                <td>序号</td>
                <td>ID</td>
                <td>账号</td>
                <td>密码</td>
                <td>手机号</td>
                <td>姓名</td>
                <td>操作</td>
            </tr>
            </thead>
            <tbody>
            <tr class="active" v-for="(item,index) in result">
                <td>{{index+1}}</td>
                <td>{{item.mid}}</td>
                <td>{{item.maccount}}</td>
                <td>{{item.mpwd}}</td>
                <td>{{item.mphone}}</td>
                <td>{{item.mname}}</td>
                <td><a href='#' @click="editMember(item.mid)">编辑</a>|<a href='#' @click="deleteMember(item.mid)">删除</a></td>

            </tr>
            </tbody>
            <tr>
                <td colspan="3"><div id="pagenav"></div></td>
            </tr>
        </table>
    </div>
</div>
<hr>


</body>
</html>
<script type="text/javascript">
    // //http://localhost:8080/memberList111.dojava
    //视图控制器==>视图==>逻辑控制器==>视图的JSON


    var app=new Vue({
        el:"#app",
        data:{
            result:[]
        }
    });


    /*111会员列表*/
    var getMemberList=function(currPageNo){
        console.log("111getMemberList函数被调用")

        $.ajax({
            type:"post",
            url:"/searchByConditions2Member.dojava",
            data:{
                pageNum:currPageNo||1,
                pageSize:5,
                mname:$("#mname").val(),
            } ,
            dataType:"json",
            success:function (obj) {
                console.log("obj=======");
                console.log(obj);
                app.result=obj.page;

                laypage({
                    cont:"pagenav",
                    pages:obj.totalPages,
                    skin:"#CD00CD",
                    first:"第一页",
                    last:"最后一页",
                    curr:currPageNo||1,
                    jump:function (obj222,first) {
                        if(!first){
                            getMemberList(obj222.curr);
                        }
                    }
                });
            }
        });
    }
    getMemberList();

    /*111点击事件*/
    $("#findUser").click(function () {
        console.log("111查询用户信息的按钮点击事件");
        getMemberList();
    });


    /*222新增用户*/
    $("#addUserBtn").click(function () {
        console.log("222新增用户的点击事件被触发");
        layer.open({
            type:2,
            title:"会员新增",
            fix:false,
            maxmin:true,
            shadeClose:true,
            area:["500px","500px"],
            content:"ZView/html/addMember.html",
            end:function () {
                getMemberList();
            }
        });
    });

    /*333删除会员信息*/
    var deleteMember=function(mid111){
        console.log("333点击了删除事件");
        layer.confirm("确认删除???",
                {btn:["是","否"]},
                //是
                function () {
                    $.ajax({
                        type:"post",
                        url:"/deleteRecord111.dojava",
                        data:{mid:mid111},
                        success:function (msg) {
                            console.log("msg=======");
                            console.log(msg);
                            console.log(msg.code);
                            getMemberList();
                            layer.msg("删除成功",{icon:6});
                        }
                    });

                },
                //否
                function () {

                });
    }

    /*444修改会员信息*/
    var editMember=function(mid222){
        console.log("444修改会员信息的点击事件被触发");
        layer.open({
            type:2,
            title:"修改新增",
            fix:false,
            maxmin:true,
            shadeClose:true,
            area:["500px","500px"],
            content:"/toDoUpdateRecord111.dojava?mid="+mid222,
            end:function () {
                getMemberList();
            }
        });
    }




    console.log("-11111");
    $(function () {
        console.log("0000");
    });
</script>